<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <aside>
        <span>blur</span>
        <input type="range" min="0" max="10" value="0" onchange="updateFilter(`blur`,this.value)">
        <span>brightness</span>
        <input type="range" min="0" max="200" value="100" onchange="updateFilter(`brightness`,this.value)">
        <span>contrast</span>
        <input type="range" min="0" max="200" value="100" onchange="updateFilter(`contrast`,this.value)">
        <span>grayscale</span>
        <input type="range" min="0" max="100" value="0" onchange="updateFilter(`grayscale`,this.value)">
        <span>hue-rotate</span>
        <input type="range" min="0" max="360" value="0" onchange="updateFilter(`hue`,this.value)">
        <span>invert</span>
        <input type="range" min="0" max="100" value="0" onchange="updateFilter(`invert`,this.value)">
        <span>opacity</span>
        <input type="range" min="0" max="100" value="100" onchange="updateFilter(`opacity`,this.value)">
        <span>saturate</span>
        <input type="range" min="0" max="300" value="150" onchange="updateFilter(`saturate`,this.value)">
        <span>sepia</span>
        <input type="range" min="0" max="100" value="0" onchange="updateFilter(`sepia`,this.value)">
    </aside>

    <video id="video">
    </video>
    <div id="buttonList">
        <button id="toggleCapture">拍照</button>
        <button id="toggleMirror">镜像</button>
        <button id="filter">滤镜</button>
        <button id="toggleWindow">全屏</button>
        <button id="exit">退出</button>
    </div>

    <audio src="shot.wav" style="display: none" id="shot_wav"></audio>
    <!-- <a download="selfie.png" style="display: none" id="download"></a> -->
    <canvas id="canvas" width="2000" height="2000"></canvas>

    <script src="control.js"></script>
    <script src="filter.js"></script>
</body>

</html>